<% content_for :googlemaps do %>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
      var centro = new google.maps.LatLng(10.463536424076864, -66.97718103149418);
      var map;

      var idmaquina;
      var onMarkerClick = function() {
        var marker = this;
        var latLng = marker.getPosition();
        //infoWindow.setContent('<a href="/maquinas/edit/'+idmaquina+'">Editar</a> <a href="/maquinas/destroy/'+idmaquina+'">Eliminar</a>');
        infoWindow.setContent('<p> There are 4 bets on machine </p>');
        infoWindow.open(map, marker);
      }


      var infoWindow=new google.maps.InfoWindow;

      function initialize() {
        var mapOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: centro
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

        google.maps.event.addListener(map, 'click', function() {
          infoWindow.close();
        });

        <% @machines.each do |machine| %>

              marker = new google.maps.Marker({
        map:map,
        draggable:false,
        animation: google.maps.Animation.DROP,
        icon: "/images/machine32.png",
        position:  new google.maps.LatLng(<%= machine.latitude %>,<%= machine.longitude %>)
      });

              idmaquina=<%= machine.id %>;
              google.maps.event.addListener(marker, 'click',onMarkerClick);
        <% end %>

    }
    </script>
<% end %>

  <table aling="center">
    <tr align="center">
    <h2 class="ourCompany-hdr" aling="center"><div aling="center" id="map_canvas" style="width:400px; height:210px"> </div></h2>

<%= link_to t('machine.back'), machines_path %>
  </tr>
  </table>